"use client";

import { RotateCw } from "lucide-react";
import { useFormState, useFormStatus } from "react-dom";

import { Button } from "~/shared/ui/button";

import { refreshCommits } from "~/app/actions";

export const RefreshButton = () => {
  const [data, formAction] = useFormState(refreshCommits, {
    success: false,
  });

  return (
    <form action={formAction}>
      <div className="flex items-center justify-end">
        <RefrButton />
      </div>
    </form>
  );
};

const RefrButton = () => {
  const formStatus = useFormStatus();

  return (
    <Button type="submit" disabled={formStatus.pending}>
      {formStatus.pending ? (
        <span className="flex items-center gap-2">
          <RotateCw className="size-5 animate-spin" /> Loading...
        </span>
      ) : (
        <span>Refresh</span>
      )}
    </Button>
  );
};
